import { defineComponent, computed, unref } from 'vue';
import { BasicDrawer } from '/@/components/Drawer/index';
import { Divider } from 'ant-design-vue';
import { TypePicker, ThemeColorPicker, SettingFooter, SwitchItem, SelectItem, InputNumberItem, } from './components';
import { AppDarkModeToggle } from '/@/components/Application';
import { MenuTypeEnum, TriggerEnum } from '/@/enums/menuEnum';
import { useRootSetting } from '/@/hooks/setting/useRootSetting';
import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
import { useHeaderSetting } from '/@/hooks/setting/useHeaderSetting';
import { useMultipleTabSetting } from '/@/hooks/setting/useMultipleTabSetting';
import { useTransitionSetting } from '/@/hooks/setting/useTransitionSetting';
import { useI18n } from '/@/hooks/web/useI18n';
import { baseHandler } from './handler';
import { HandlerEnum, contentModeOptions, topMenuAlignOptions, getMenuTriggerOptions, routerTransitionOptions, menuTypeList, mixSidebarTriggerOptions, } from './enum';
import { HEADER_PRESET_BG_COLOR_LIST, SIDE_BAR_BG_COLOR_LIST, APP_PRESET_COLOR_LIST, } from '/@/settings/designSetting';
const { t } = useI18n();
export default defineComponent({
    name: 'SettingDrawer',
    setup(_, { attrs }) {
        const { getContentMode, getShowFooter, getShowBreadCrumb, getShowBreadCrumbIcon, getShowLogo, getFullContent, getColorWeak, getGrayMode, getShowDarkModeToggle, getThemeColor, } = useRootSetting();
        const { getOpenPageLoading, getBasicTransition, getEnableTransition, getOpenNProgress } = useTransitionSetting();
        const { getIsHorizontal, getShowMenu, getMenuType, getTrigger, getCollapsedShowTitle, getMenuFixed, getCollapsed, getCanDrag, getTopMenuAlign, getAccordion, getMenuWidth, getMenuBgColor, getIsTopMenu, getSplit, getIsMixSidebar, getCloseMixSidebarOnChange, getMixSideTrigger, getMixSideFixed, } = useMenuSetting();
        const { getShowHeader, getFixed: getHeaderFixed, getHeaderBgColor, getShowSearch, } = useHeaderSetting();
        const { getShowMultipleTab, getShowQuick, getShowRedo, getShowFold } = useMultipleTabSetting();
        const getShowMenuRef = computed(() => {
            return unref(getShowMenu) && !unref(getIsHorizontal);
        });
        function renderSidebar() {
            return (<>
          <TypePicker menuTypeList={menuTypeList} handler={(item) => {
                    baseHandler(HandlerEnum.CHANGE_LAYOUT, {
                        mode: item.mode,
                        type: item.type,
                        split: unref(getIsHorizontal) ? false : undefined,
                    });
                }} def={unref(getMenuType)}/>
        </>);
        }
        function renderHeaderTheme() {
            return (<ThemeColorPicker colorList={HEADER_PRESET_BG_COLOR_LIST} def={unref(getHeaderBgColor)} event={HandlerEnum.HEADER_THEME}/>);
        }
        function renderSiderTheme() {
            return (<ThemeColorPicker colorList={SIDE_BAR_BG_COLOR_LIST} def={unref(getMenuBgColor)} event={HandlerEnum.MENU_THEME}/>);
        }
        function renderMainTheme() {
            return (<ThemeColorPicker colorList={APP_PRESET_COLOR_LIST} def={unref(getThemeColor)} event={HandlerEnum.CHANGE_THEME_COLOR}/>);
        }
        function renderFeatures() {
            let triggerDef = unref(getTrigger);
            const triggerOptions = getMenuTriggerOptions(unref(getSplit));
            const some = triggerOptions.some((item) => item.value === triggerDef);
            if (!some) {
                triggerDef = TriggerEnum.FOOTER;
            }
            return (<>
          <SwitchItem title={t('layout.setting.splitMenu')} event={HandlerEnum.MENU_SPLIT} def={unref(getSplit)} disabled={!unref(getShowMenuRef) || unref(getMenuType) !== MenuTypeEnum.MIX}/>
          <SwitchItem title={t('layout.setting.mixSidebarFixed')} event={HandlerEnum.MENU_FIXED_MIX_SIDEBAR} def={unref(getMixSideFixed)} disabled={!unref(getIsMixSidebar)}/>

          <SwitchItem title={t('layout.setting.closeMixSidebarOnChange')} event={HandlerEnum.MENU_CLOSE_MIX_SIDEBAR_ON_CHANGE} def={unref(getCloseMixSidebarOnChange)} disabled={!unref(getIsMixSidebar)}/>
          <SwitchItem title={t('layout.setting.menuCollapse')} event={HandlerEnum.MENU_COLLAPSED} def={unref(getCollapsed)} disabled={!unref(getShowMenuRef)}/>

          <SwitchItem title={t('layout.setting.menuDrag')} event={HandlerEnum.MENU_HAS_DRAG} def={unref(getCanDrag)} disabled={!unref(getShowMenuRef)}/>
          <SwitchItem title={t('layout.setting.menuSearch')} event={HandlerEnum.HEADER_SEARCH} def={unref(getShowSearch)} disabled={!unref(getShowHeader)}/>
          <SwitchItem title={t('layout.setting.menuAccordion')} event={HandlerEnum.MENU_ACCORDION} def={unref(getAccordion)} disabled={!unref(getShowMenuRef)}/>

          <SwitchItem title={t('layout.setting.collapseMenuDisplayName')} event={HandlerEnum.MENU_COLLAPSED_SHOW_TITLE} def={unref(getCollapsedShowTitle)} disabled={!unref(getShowMenuRef) || !unref(getCollapsed) || unref(getIsMixSidebar)}/>

          <SwitchItem title={t('layout.setting.fixedHeader')} event={HandlerEnum.HEADER_FIXED} def={unref(getHeaderFixed)} disabled={!unref(getShowHeader)}/>
          <SwitchItem title={t('layout.setting.fixedSideBar')} event={HandlerEnum.MENU_FIXED} def={unref(getMenuFixed)} disabled={!unref(getShowMenuRef) || unref(getIsMixSidebar)}/>
          <SelectItem title={t('layout.setting.mixSidebarTrigger')} event={HandlerEnum.MENU_TRIGGER_MIX_SIDEBAR} def={unref(getMixSideTrigger)} options={mixSidebarTriggerOptions} disabled={!unref(getIsMixSidebar)}/>
          <SelectItem title={t('layout.setting.topMenuLayout')} event={HandlerEnum.MENU_TOP_ALIGN} def={unref(getTopMenuAlign)} options={topMenuAlignOptions} disabled={!unref(getShowHeader) ||
                    unref(getSplit) ||
                    (!unref(getIsTopMenu) && !unref(getSplit)) ||
                    unref(getIsMixSidebar)}/>
          <SelectItem title={t('layout.setting.menuCollapseButton')} event={HandlerEnum.MENU_TRIGGER} def={triggerDef} options={triggerOptions} disabled={!unref(getShowMenuRef) || unref(getIsMixSidebar)}/>
          <SelectItem title={t('layout.setting.contentMode')} event={HandlerEnum.CONTENT_MODE} def={unref(getContentMode)} options={contentModeOptions}/>
          <InputNumberItem title={t('layout.setting.expandedMenuWidth')} max={600} min={100} step={10} event={HandlerEnum.MENU_WIDTH} disabled={!unref(getShowMenuRef)} defaultValue={unref(getMenuWidth)} formatter={(value) => `${parseInt(value)}px`}/>
        </>);
        }
        function renderContent() {
            return (<>
          <SwitchItem title={t('layout.setting.breadcrumb')} event={HandlerEnum.SHOW_BREADCRUMB} def={unref(getShowBreadCrumb)} disabled={!unref(getShowHeader)}/>

          <SwitchItem title={t('layout.setting.breadcrumbIcon')} event={HandlerEnum.SHOW_BREADCRUMB_ICON} def={unref(getShowBreadCrumbIcon)} disabled={!unref(getShowHeader)}/>

          <SwitchItem title={t('layout.setting.tabs')} event={HandlerEnum.TABS_SHOW} def={unref(getShowMultipleTab)}/>

          <SwitchItem title={t('layout.setting.tabsRedoBtn')} event={HandlerEnum.TABS_SHOW_REDO} def={unref(getShowRedo)} disabled={!unref(getShowMultipleTab)}/>

          <SwitchItem title={t('layout.setting.tabsQuickBtn')} event={HandlerEnum.TABS_SHOW_QUICK} def={unref(getShowQuick)} disabled={!unref(getShowMultipleTab)}/>
          <SwitchItem title={t('layout.setting.tabsFoldBtn')} event={HandlerEnum.TABS_SHOW_FOLD} def={unref(getShowFold)} disabled={!unref(getShowMultipleTab)}/>

          <SwitchItem title={t('layout.setting.sidebar')} event={HandlerEnum.MENU_SHOW_SIDEBAR} def={unref(getShowMenu)} disabled={unref(getIsHorizontal)}/>

          <SwitchItem title={t('layout.setting.header')} event={HandlerEnum.HEADER_SHOW} def={unref(getShowHeader)}/>
          <SwitchItem title="Logo" event={HandlerEnum.SHOW_LOGO} def={unref(getShowLogo)} disabled={unref(getIsMixSidebar)}/>
          <SwitchItem title={t('layout.setting.footer')} event={HandlerEnum.SHOW_FOOTER} def={unref(getShowFooter)}/>
          <SwitchItem title={t('layout.setting.fullContent')} event={HandlerEnum.FULL_CONTENT} def={unref(getFullContent)}/>

          <SwitchItem title={t('layout.setting.grayMode')} event={HandlerEnum.GRAY_MODE} def={unref(getGrayMode)}/>

          <SwitchItem title={t('layout.setting.colorWeak')} event={HandlerEnum.COLOR_WEAK} def={unref(getColorWeak)}/>
        </>);
        }
        function renderTransition() {
            return (<>
          <SwitchItem title={t('layout.setting.progress')} event={HandlerEnum.OPEN_PROGRESS} def={unref(getOpenNProgress)}/>
          <SwitchItem title={t('layout.setting.switchLoading')} event={HandlerEnum.OPEN_PAGE_LOADING} def={unref(getOpenPageLoading)}/>

          <SwitchItem title={t('layout.setting.switchAnimation')} event={HandlerEnum.OPEN_ROUTE_TRANSITION} def={unref(getEnableTransition)}/>

          <SelectItem title={t('layout.setting.animationType')} event={HandlerEnum.ROUTER_TRANSITION} def={unref(getBasicTransition)} options={routerTransitionOptions} disabled={!unref(getEnableTransition)}/>
        </>);
        }
        return () => (<BasicDrawer {...attrs} title={t('layout.setting.drawerTitle')} width={330} class="setting-drawer">
        {unref(getShowDarkModeToggle) && <Divider>{() => t('layout.setting.darkMode')}</Divider>}
        {unref(getShowDarkModeToggle) && <AppDarkModeToggle class="mx-auto"/>}
        <Divider>{() => t('layout.setting.navMode')}</Divider>
        {renderSidebar()}
        <Divider>{() => t('layout.setting.sysTheme')}</Divider>
        {renderMainTheme()}
        <Divider>{() => t('layout.setting.headerTheme')}</Divider>
        {renderHeaderTheme()}
        <Divider>{() => t('layout.setting.sidebarTheme')}</Divider>
        {renderSiderTheme()}
        <Divider>{() => t('layout.setting.interfaceFunction')}</Divider>
        {renderFeatures()}
        <Divider>{() => t('layout.setting.interfaceDisplay')}</Divider>
        {renderContent()}
        <Divider>{() => t('layout.setting.animation')}</Divider>
        {renderTransition()}
        <Divider />
        <SettingFooter />
      </BasicDrawer>);
    },
});
//# sourceMappingURL=SettingDrawer.jsx.map